<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请求权限管理</title>
    <script type="text/javascript" src="/public/common.js"></script>
    <script type="text/javascript" src="/public/sose/js/checkViewPermissions.js"></script>
</head>
<body>
<div class="layout-body" id="permissions" v-cloak>
    <layout-header></layout-header>
    <div id="wrap">
        <layout-sider></layout-sider>
        <div class="layout-main">
            <div class="qry">
                <div class="first">
                    <div class="butRight">
                        <span class="juinline">
                            请求所属模块:
                            <el-select class="input" v-model="SConditions.moduleId"
                                       placeholder="请搜索" :size="componentSize" :loading="loading"
                                       filterable remote :remote-method="getModulesList"
                                       @change="getModule">
                                <el-option v-for="item in moduleList"
                                           :key="item.id"
                                           :label="item.moduleName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.moduleName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
                                </el-option>
                            </el-select>
                        </span>
                        <span class="juinline">
                            请求所属类型:
                            <el-select class="input" v-model="SConditions.typeId"
                                       :size="componentSize" :loading="loading"
                                       filterable @change="getList">
                                <el-option v-for="item in typeList"
                                           :key="item.id"
                                           :label="item.typeName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.description }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                                </el-option>
                            </el-select>
                        </span>
                        <span class="juinline">
                            请求路径:<el-input class="select_input" type="text" v-model="SConditions.url" size="medium"
                                           placeholder="如：/url/url2"></el-input>
                        </span>
                    </div>
                    <div class="butRight">
                        <i-button type="primary" icon="ios-search" @click="filter">搜索</i-button>
                        <i-button @click="clearSConditions">清空</i-button>
                    </div>
                    <div class="butRight-button">
                        <i-button type="info" shape="circle" @click="resetRedis">重置缓存</i-button>
                    </div>
                </div>
                <div class="butLeft">
                    <i-button type="primary" @click="addPermissionModal = true">新增请求权限</i-button>
                    <i-button @click="openRemovePermissionSelectModal">批量删除</i-button>
                    <i-button @click="openDisablePermissionSelectModal">批量禁用</i-button>
                </div>
            </div>
            <div>
                <i-table row-key="id" class="table" border height="auto" highlight-row="true"
                         size='small' :columns="column" :data="nowData" :loading="loading"
                         @on-selection-change="onSelectionChange">
                    <template slot-scope="{ row, index }" slot="action">
                        <a class="table-a" @click="openEditPermissionModal(index)">编辑</a>
                        <a @click="openRemovePermissionModal(index)">删除</a>
                        <a @click="openDisablePermissionModal(index)">禁用</a>

                    </template>
                </i-table>
                <div class="div-inline-left">
                    <span v-show="selection.length >0">已勾选 {{selection.length}}条</span>
                </div>
                <!-- 分页 -->
                <div class="div-inline-right">
                    <!-- current:当前页码  total:数据总数  page-size:每页条数-->
                    <Page :current="pageNum" :total="totalNum" :page-size="pageSize"
                          @on-change="onPageChange" @on-page-size-change="onPageSizeChange"
                          show-total show-elevator show-sizer></Page>
                </div>
            </div>
        </div>

        <!--编辑单个请求权限-->
        <Modal v-model="editPermissionModal" :mask-closable="false" @on-cancel="cancelEditPermission">
            <p slot="header">
                <span>编辑请求权限</span>
            </p>
            <div class="modal-content">
                <table>
                    <tr>
                        <td>请求权限类型:</td>
                        <td>
                            <el-select class="input" v-model="permissions.typeName"
                                       :size="componentSize" :loading="loading" filterable
                                       @change="getList">
                                <el-option v-for="item in typeList"
                                           :key="item.id"
                                           :label="item.typeName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.description }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>请求所属模块:</td>
                        <td>
                            <el-select class="input" v-model="permissions.moduleName"
                                       placeholder="请搜索" :size="componentSize" :loading="loading"
                                       filterable remote :remote-method="getModulesList"
                                       @change="getModule">
                                <el-option v-for="item in moduleList"
                                           :key="item.id"
                                           :label="item.moduleName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.moduleName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>接口备注:</td>
                        <td>
                            <el-input
                                    class="input" type="textarea" v-model.trim="permissions.description"
                                    size="medium"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>接口方法名:</td>
                        <td>
                            <el-input
                                    class="input" type="text" v-model.trim="permissions.name"
                                    size="medium"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>请求路径:</td>
                        <td>
                            <el-input class="input" type="textarea"
                                      v-model.trim="permissions.url" size="medium">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>是否禁用:</td>
                        <td>
                            <el-radio-group v-model="permissions.enable" size="small">
                                <el-radio-button :label=true>启用</el-radio-button>
                                <el-radio-button
                                        :label=false>禁用
                                </el-radio-button>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td>
                            <el-input class="input" type="textarea"
                                      v-model.trim="permissions.remark" size="medium">
                            </el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelEditPermission">取消</i-button>
                <i-button type="primary" size="large" @click="editPermission">确定</i-button>
            </div>
        </Modal>


        <!--新增请求权限-->
        <Modal v-model="addPermissionModal" :mask-closable="false" @on-cancel="cancelAddPermission">
            <p slot="header">
                <span>新增请求权限</span>
            </p>
            <div class="modal-content">
                <table class="modal-content-table">
                    <tr>
                        <td>请求权限类型:</td>
                        <td>
                            <el-select class="input" v-model="permissions.typeName"
                                       :size="componentSize" :loading="loading"
                                       filterable @change="getList">
                                <el-option v-for="item in typeList"
                                           :key="item.id"
                                           :label="item.typeName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.description }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>请求所属模块:</td>
                        <td>
                            <el-select class="input" v-model="permissions.permissionsModuleId"
                                       placeholder="请搜索" :size="componentSize" :loading="loading"
                                       filterable remote :remote-method="getModulesList"
                                       @change="getModule">
                                <el-option v-for="item in moduleList"
                                           :key="item.id"
                                           :label="item.moduleName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.moduleName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.description }}</span>
                                </el-option>
                            </el-select>

                        </td>
                    </tr>
                    <tr>
                        <td>接口备注:</td>
                        <td>
                            <el-input
                                    class="input" type="textarea" v-model.trim="permissions.description"
                                    size="medium"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>接口方法名:</td>
                        <td>
                            <el-input
                                    class="input" type="text" v-model.trim="permissions.name"
                                    size="medium"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>请求路径:</td>
                        <td>
                            <el-input class="input" type="textarea"
                                      v-model.trim="permissions.url" size="medium">
                            </el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td>
                            <el-input class="input" type="textarea"
                                      v-model.trim="permissions.remark" size="medium">
                            </el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelAddPermission">取消</i-button>
                <i-button type="primary" size="large" @click="addPermission">确定</i-button>
            </div>
        </Modal>

        <!-- 单个禁用模态框 -->
        <Modal v-model="disablePermissionModal" title="禁用请求权限"
               @on-ok="disablePermission">
            <p>确定禁用该请求权限？禁用后原有内容将不再进行保存</p>
        </Modal>

        <!-- 批量禁用模态框 -->
        <Modal v-model="disablePermissionSelectModal" title="批量禁用请求权限"
               @on-ok="disablePermissionSelect">
            <p>确定禁用当前 {{selection.length}} 条请求权限？禁用后原有内容将不再进行保存</p>
        </Modal>

        <!-- 单个删除模态框 -->
        <Modal v-model="removePermissionModal" title="删除请求权限"
               @on-ok="removePermission">
            <p>确定删除该请求权限？删除后原有内容将不再进行保存</p>
        </Modal>

        <!-- 批量删除模态框 -->
        <Modal v-model="removePermissionSelectModal" title="批量删除请求权限"
               @on-ok="removePermissionSelect">
            <p>确定删除当前 {{selection.length}} 个请求权限？删除后原有内容将不再进行保存</p>
        </Modal>

    </div>
    <div style="clear: both"></div>
    <layout-footer></layout-footer>
</div>

<script type="text/javascript" src="/templates/config/js/permissions.js"></script>
</body>
</html>